<!DOCTYPE html>
<html>
<head>
    <style>
        .form-container { padding: 20px; }
        .form-field { margin-bottom: 15px; }
    </style>
</head>
<body>
    <div class="form-container">
        <div class="form-field">
            <label>片段名称：</label>
            <input id="snippetName" type="text">
        </div>
        
        <!-- 动态类型选择 -->
        <div class="form-field">
            <label>代码类型：</label>
            <select id="snippetType">
                <option value="vue">Vue组件</option>
                <option value="js">JavaScript</option>
            </select>
        </div>

        <!-- Vue专用字段 -->
        <div id="vueFields" class="form-field" style="display:none;">
            <textarea id="vueTemplate" placeholder="模板代码"></textarea>
            <textarea id="vueScript" placeholder="脚本代码"></textarea>
        </div>

        <button onclick="submitForm()">保存</button>
    </div>

    <script>
        // 动态显示Vue字段
        document.getElementById('snippetType').addEventListener('change', (e) => {
            document.getElementById('vueFields').style.display = 
                e.target.value === 'vue' ? 'block' : 'none';
        });

        // 与插件通信
        const vscode = acquireVsCodeApi();
        function submitForm() {
            const formData = {
                name: document.getElementById('snippetName').value,
                type: document.getElementById('snippetType').value,
                template: document.getElementById('vueTemplate')?.value || ''
            };
            vscode.postMessage(formData);
        }
    </script>
</body>
</html>
